<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>
<head>
    <base href="${pageContext.request.contextPath}/"/>
    <link rel="stylesheet" type="text/css" href="view/bootstrap-3.3.5/css/bootstrap.css">
    <script charset="UTF-8" src="view/jquery/jquery-1.10.2.min.js"></script>
    <script charset="UTF-8" src="view/bootstrap-3.3.5/js/bootstrap.js"></script>
    <script charset="UTF-8" src="view/echarts/echarts.js"></script>
    <title>Title</title>
</head>
<body>
<div class="container">
    <div class="panel panel-primary">

        <div class="panel-heading">
            <h4 class="panel-title">报销申请统计</h4>
        </div>

        <div class="row">
            <div class="col-md-12">
                <form action="bxtj/selectbxTJ" method="post">
                    <div class="form-group">

                        <label class="col-md-1 control-label" style="padding-left: 5px;padding-top: 5px">统计类型</label>
                        <div class="col-md-2">
                            <select class="form-control" name="tjtype" id="s">
                                <option value="">请选择方式</option>
                                <option value="1" ${tjtype==1?"selected":"" }>按部门统计</option>
                                <option value="2" ${tjtype==2?"selected":"" }>按报销类型统计</option>
                            </select>
                        </div>

                        <label class="col-md-1 control-label" style="padding-left: 5px;padding-top: 5px">申请时间</label>
                        <div class="col-md-3">
                            <input type="date" name="startDate" id="startDate" class="form-control"
                                   value="<fmt:formatDate value='${startDate}' pattern='yyyy-MM-dd'/>">
                        </div>
                        <div class="col-md-1" style="padding-left: 5px;padding-top: 5px">到</div>
                        <div class="col-md-3">
                            <input type="date" name="endDate" id="endDate" placeholder="请输入结束时间" class="form-control"
                                   value="<fmt:formatDate value='${endDate}' pattern='yyyy-MM-dd'/>">
                        </div>

                        <div class="col-md-1">
                            <input type="submit" class="btn btn-primary" id="sub" value="统计">
                        </div>

                    </div>
                </form>
            </div>
        </div>

        <br>

        <div class="row">
            <div class="col-md-12">
                <table class="table table-bordered" id="tab1">
                    <thead>
                    <tr align="center">
                        <td class="success">名称</td>
                        <td class="success">申报金额</td>
                        <td class="success">实报金额</td>
                    </tr>
                    </thead>
                    <c:forEach items="${list}" var="o">
                        <tr align="center">
                            <td>${o[0]}</td>
                            <td>${o[2]}</td>
                            <td>${o[1]}</td>
                        </tr>

                    </c:forEach>
                </table>
            </div>
        </div>

    </div>
</div>

<div class="container">
    <div class="row">
        <div class="col-md-5 col-md-offset-1" id="charts1"
             style="height: 600px;"></div>

        <div class="col-md-5 col-md-offset-1" id="charts2"
             style="height: 600px;"></div>
    </div>
</div>

</body>

<script type="text/javascript">
    $(document).ready(function () {

        var d1 = $("#startDate").val();
        var d2 = $("#endDate").val();

        seek(d1, d2);


    });


    function seek(startDate, endDate) {

        var tjtype = $("#s").val();

        $.getJSON("bxtj/selecttypebing?tjtype=" + tjtype + "&startDate=" + startDate + "&endDate=" + endDate, function (json) {

            var charts1 = echarts.init($("#charts1")[0]);
            charts1.setOption({
                title: {
                    text: "报销饼状图统计情况"
                },
                tooltip: {},
                series: [{
                    type: "pie",
                    radius: "50%",
                    data: json
                }]
            });

        });

        var tjtype = $("#s").val();

        var charts2 = echarts.init($("#charts2")[0]);
        $.getJSON("bxtj/selecttypezhu?tjtype=" + tjtype + "&startDate=" + startDate + "&endDate=" + endDate, function (map) {
            charts2.setOption({
                title: {
                    text: "柱状图统计报销情况"
                },
                tooltip: {},
                xAxis: {
                    data: map.key
                },
                yAxis: {},
                series: [{
                    type: 'bar',//bar 柱状图
                    data: map.value,
                    itemStyle: {
                        normal: {
                            //这里是重点
                            color: function (params) {
                                //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
                                var colorList = ['#d48265', '#91c7ae', '#749f83', '#ca8622', '#bda29a', '#6e7074', '#546570', '#c4ccd3', '#ff0000', '#00ff00', '#0000ff'];
                                return colorList[params.dataIndex];
                            }
                        }
                    }
                }]

            });

        });

    }

</script>
</html>
